<!doctype html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Now Time</title>
    <style>
        #box {
            width: 250px;
            height: 300px;
            background-color: orangered;
            margin: 100px auto;
            padding: 20px;
            border-radius: 20px;

        }

        #box_top {
            font-size: 23px;
            color: #fff;
            margin-bottom: 40px;
            margin-left: 15px;
            justify-content: center;
            align-items: center;


        }

        #box_bottom {
            width: 90%;
            height: 70%;
            background-color: orange;
            margin: 0 auto;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="box_top"></div>
    <div id="box_bottom"></div>
</div>
<script>
    window.onload = function () {
        window.setInterval(
            function () {
                //    1. 创建日期对象
                var date = new Date();
                var y = date.getFullYear();
                var m = date.getMonth();
                var d = date.getDate();
                var week = date.getDay();
                var h = dou(date.getHours());
                var M = dou(date.getMinutes());
                var s = dou(date.getSeconds());
                var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                //    2 赋值
                $('box_top').innerText = y + '年' + m + '月' + d + '日' + weeks[week];
                $('box_bottom').innerText = h + ":" + M + ":" + s

                function $(id) {
                    return typeof id === 'string' ? document.getElementById(id) : null;
                }
            }
            , 1000)

        //    3. 修改当计数为零时显示两位数
        function dou(num) {
            return num > 10 ? num : "0" + num;
        }
    }
</script>
</body>
</html>